<!DOCTYPE html>
<html>

<head>
    <title>Preview Display</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="custom/images/favicon.ico?v=2" />
    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
        }
    </style>
    <script src='../libs/core/IZrowIfUVaXF.js'></script>
    <script src='../libs/core/VT3MIEkV8AKv.js'></script>
    <script src='../libs/core/ht.js'></script>
    <script src='../libs/core/buckle.js'></script>
    <script src='../libs/core/ht-ui.js'></script>

    <script src='../libs/plugin/ht-edgetype.js'></script>
    <script src="../libs/plugin/ht-obj.js"></script>
    <script src='../libs/plugin/ht-form.js'></script>
    <script src='../libs/plugin/ht-vector.js'></script>
    <script src='../libs/plugin/ht-animation.js'></script>

    <script src='../configs/htconfig.js'></script>

    <!-- <script src="../libs/china.js"></script> -->
    <script src="../libs/echarts.min.js"></script>
    <script src='../libs/echarts.js'></script>
    <script src='../libs/jquery-3.4.1.min.js'></script>
    <script src='../libs/echarts.js'></script>
    <script src='../libs/buckle.js'></script>
    <script src='../libs/knU3sXefAa5Q.js'></script>
	
	<!--<script src='../../requestConfig/config.js'></script> -->
	<script src="../configs/urlConfig.js"></script>
	
     <script>
	
        var dataModel = new ht.DataModel();
		
		var dm_global; //全局dm
		var graphView_global; //graphView
		var view_global; //view
		
        var tabledata2 = [];
        var tabledata3 = [];
        var startId = 0;

        var cityMap = [
            {
                "id": 5,
                "name": "张家口",
                "position": {
                    'x': 616,
                    'y': 428
                },
            },{
                "id": 6,
                "name": "唐山",
                "position": {
                    'x': 1360,
                    'y': 590
                },
            },{
                "id": 7,
                "name": "廊坊",
                "position": {
                    'x': 1000,
                    'y': 630
                },
            },{
                "id": 8,
                "name": "承德",
                "position": {
                    'x': 1200,
                    'y': 269,
                },
            },{
                "id": 9,
                "name": "秦皇岛",
                "position": {
                    'x': 1550,
                    'y': 510
                },
            }
        ];
        var windFieldMap = [
            {
                "name": "尚义",
                "id": 2000,
                "position": {
                    "x": 430,
                    "y": 320
                },
				"usage":1
            },
            {
                "name": "康保",
                "id": 2001,
                "position": {
                    "x": 566,
                    "y": 192
                },
				"usage":0.8
            },
			{
                "name": "张北#1#2",
                "id": 2002,
                "position": {
                    "x": 500,
                    "y": 280
                },
				"usage":0.7
            },
			{
                "name": "张北#3",
                "id": 2003,
                "position": {
                    "x": 560,
                    "y": 300
                },
				"usage":0.1
            },
            {
                "name": "沽源",
                "id": 2004,
                "position": {
                    "x": 800,
                    "y": 230
                },
				"usage":0.5
            },
            {
                "name": "御道口",
                "id": 2005,
                "position": {
                    "x": 1080,
                    "y": 120
                },
				"usage":0.3
            },
			{
                "name": "木兰",
                "id": 2006,
                "position": {
                    "x": 1250,
                    "y": 180
                },
				"usage":0.9
            },
			{
                "name": "隆城",
                "id": 2007,
                "position": {
                    "x": 1260,
                    "y": 310
                },
				"usage":0
            },
			{
                "name": "万全",
                "id": 2008,
                "position": {
                    "x": 480,
                    "y": 430
                },
				"usage":0.6
            },
			{
                "name": "张家口",
                "id": 2009,
                "position": {
                    "x": 690,
                    "y": 430
                }
            },
			{
                "name": "张南",
                "id": 2010,
                "position": {
                    "x": 600,
                    "y": 520
                },
				"usage":0.4
            },
            {
                "name": "金山岭",
                "id": 2011,
                "position": {
                    "x": 1080,
                    "y": 360
                }
            },
			{
                "name": "太平站",
                "id": 2012,
                "position": {
                    "x": 1080,
                    "y": 430
                }
            },
            {
                "name": "顺义",
                "id": 2013,
                "position": {
                    "x": 1080,
                    "y": 540
                }
            }
        ];

        var edgeList = [
            {
                "endId": 2009, // 张家口 ——> 尚义
                "startId": 2000,
                "usage": 0,
                "id": 'edge1'
            },
			{
                "endId": 2009, // 康保 ——> 张家口 
                "startId": 2001,
                "usage": 0,
                "id": 'edge2'
            },
            {
                "endId": 2010, // 张家口 ——> 张南
                "startId": 2009,
                "usage": 0.8,
                "id": 'edge3'
            },
            {
                "endId": 2008, // 万全 ——> 张北#1#2
                "startId": 2002,
                "usage": 0.6,
                "id": 'edge4'
            },
            {
                "endId": 2008, // 万全 ——> 张北#3
                "startId": 2003,
                "usage": 0.4,
                "id": 'edge5'
            },
            {
                "endId": 2008, // 顺义 ——> 万全
                "startId": 2013,
                "usage": 0.2,
                "id": 'edge6'
            },
            {
                "endId": 2012, // 沽源 ——> 太平站
                "startId": 2004,
                "usage": 0,
                "id": 'edge7'
            },
			{
                "endId": 2011, // 御道口 ——> 金山岭
                "startId": 2005,
                "usage": 0.9,
                "id": 'edge8'
            },
			{
                "endId": 2007, // 木兰 ——> 隆城
                "startId": 2006,
                "usage": 0,
                "id": 'edge9'
            }
        ]

	//	window.addEventListener("click", function(message) {
    //        console.log('鼠标点击', message);
     //       debugger
     //   });

        function init() {
            // graphView = new ht.graph.GraphView(dataModel);
            // graphView.addToDOM();
            gd2 = new ht.graph.GraphView();
            gd2.addToDOM();
            graphView = new ht.graph.GraphView(dataModel);
            graphView.addToDOM(gd2.getView());
			graphView_global = graphView;
			view_global = gd2.getView();
			
            gd2.deserialize('displays/冀北/消纳/xiaonaditu.json', function (json, dm, g2d, datas) {
                // TODO 2D 反序列化完成回调，后面会讲到
                dm.enableAnimation();
				
				dm_global = dm;
				
				indicatorsData();//调用数据获取方法
				setInterval(indicatorsData(),3600*1000);//每小时刷新一次
				
				getSubstationMap();//调用变电站获取方法
				setInterval(getSubstationMap(),3600*1000);//每小时刷新一次
				createNodes(dm, cityMap,1);//创建城市
                createTip(dm);
            });
            

            ht.Default.xhrLoad('displays/冀北/消纳/新能源消纳总览.json', function (text) {
                var json = ht.Default.parse(text);
                if (json.title) document.title = json.title;
                dataModel.deserialize(json);
            });
			
			//gd2.onEdgeDoubleClicked = function(a,b) {
			gd2.onDataClicked = function(a,b){
				if(a._image != "symbols/冀北/城市.json"){
					var startX = a._target._position.x;
					var startY = a._target._position.y;
					var endX = a._source._position.x;
					var endY = a._source._position.y;
					var x = (a._target._position.x + a._source._position.x)/2;
					var y = (a._target._position.y + a._source._position.y)/2;

					dataModel.getDataByTag("通道说明").s('2d.visible',true);
					dataModel.getDataByTag("通道说明").a('abandonedElectricRate',a._toolTip);
					dataModel.getDataByTag("通道说明").setPosition(x,y);
				}
			}
			
			gd2.onBackgroundClicked = function(event){
				dataModel.getDataByTag("通道说明").s('2d.visible',false);
			}
        }
        

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return null;
        }

        //创建node 
        function createNodes(dm, datas, type) {
            //var host = dm.getDataByTag("zhangjiakou").getHost();
            for (var i = 0; i < datas.length; i++) {
                //debugger         
                var node = new ht.Node();
                node.setLayer('1');
				var temp = datas[i];
				
                if(type == 1){
                    node.setImage('symbols/冀北/城市.json');
					node.setRect(temp.position.x, temp.position.y, 36, 36);
					node.setTag(temp.id);
					//node.s('2d.selectable',false);
                }else{
					if(temp.usage){
						node.setImage('symbols/冀北/变电站.json');
						var usageData = temp.usage;
						node.a('usageValue',usageData.toFixed(2));
						var usagePercent = usageData*100
						node.a('usage',usagePercent.toFixed(2) +'%');
						node.setRect(temp.position.x, temp.position.y, 43, 26);
						node.s('label.offset.x', 8);//文字位置x轴偏移量
					}else{
						node.setImage('symbols/冀北/变电站无通道.json');
						node.setRect(temp.position.x, temp.position.y, 24, 26);
					}
					
					
					node.setName(temp.name);
					node.s('label.color', '#008F8A');//名称颜色
					node.s('label.font', '14px Microsoft YaHei');//名称字体
					node.s('label.offset.y', 5);//文字位置y轴偏移量
					node.s('label.background', 'rgba(255,255,255,0.8)');//文字背景颜色
                }                
               // node.setHost(host);
                if(temp.id){
                    node.setId(temp.id);
                }
                node.s('2d.movable',false);
                // node.getView().addEventListener('click',function(){alert(123)});
                // node.dm().addEventListener('click',function(){alert(123)});
                dm.add(node);
            }
        };

        function createEdge(dm,view,datas) {
            datas.forEach(function(element){
				var sourceNode = dm.getDataById(element.startId);
				var targetNode = dm.getDataById(element.endId);
				edgeNode = new ht.Edge(sourceNode, targetNode);
				
				edgeNode.s('edge.type','ripple');
                edgeNode.s('edge.ripple.elevation',-70);
                edgeNode.s('edge.width',4);
                edgeNode.s('edge.cap','round');
                edgeNode.s('edge.dash',true);
                edgeNode.s('edge.dash.pattern',[16,200]);
                edgeNode.s('edge.dash.color','rgba(238,254,255, 1)');//虚线部分颜色
				edgeNode.s('edge.dash.width',5);
                edgeNode.s('label.color', '#090085');//名称颜色
                //edgeNode.s('label.font', 'bold 14px Microsoft YaHei');//名称字体
				edgeNode.s('label.position.fixed', 'true');//文字位置固定在连线的一侧
				//edgeNode.s('label.offset.y', 15);//文字位置y轴偏移量
				edgeNode.setToolTip(element.usage*100 +'%')	;
				//edgeNode.setName('通道利用率为' + element.usage*100 +'%');
				edgeNode.setTag(element.id);
				edgeNode.setId(element.id);
				
				//设置渐变色
                var endR = 255;
                var endG = 83;
                var endB = 31;

                var startR = 101;
                var startG = 116;
                var startB = 252;

                var r = startR + (endR - startR)*element.usage;
                var g = startG + (endG - startG)*element.usage;
                var b = startB + (endB - startB)*element.usage;
                
                edgeNode.s('edge.color',"rgb("+r+","+g+","+b+")");
                edgeNode.setAnimation({
                    flowing: {
                        property: 'edge.dash.offset',
                        accessType: 'style',
                        easing: 'Linear',
                        from: 0, 
                        to: 1000,
                        frames: 500,
                        interval: 30,
                        onComplete: function() {
                            console.log(this.s('edge.dash.offset'))
                            this.s('edge.dash.offset', 0);
                        },
                        next: 'flowing'
                    },
                    start: ['flowing']
                });
				
				dm.add(edgeNode);
			   
			})
        }
		
		
		
        function createTip (dm) {
            //var node = new ht.Node();
            //node.setImage('symbols/冀北/消纳弹框.json');
            //node.setPosition(500, 360);
            //dm.add(node);
			
			//var node = dataModel.getDataByTag("消纳弹框");
			//debugger
			//node.setPosition(500,360);
        }


		//获取页面图表数据
		function indicatorsData() {
		    //左上角指标
			$.ajax({
				url: attributeConfig.url + "/epplatform/v1/consumption/overview",
				type:"GET",
				contentType:"application/json",
				dataType:"json", 
				data:JSON.stringify(),
				success:function(result){
					if(result.data.installedCapacity || result.data.installedCapacity === 0){
						dataModel.getDataByTag('新能源装机').s('text',result.data.installedCapacity+'MW');
					}else{
						dataModel.getDataByTag('新能源装机').s('text','--MW');
					}
					if(result.data.electricity || result.data.electricity === 0){
						dataModel.getDataByTag('年累计发电量').s('text',result.data.electricity+'亿kWh');
					}else{
						dataModel.getDataByTag('年累计发电量').s('text','--亿kWh');
					}
					if(result.data.increasedElectricity || result.data.increasedElectricity === 0){
						dataModel.getDataByTag('全网年累计增发电量').s('text',result.data.increasedElectricity+'亿kWh');
					}else{
						dataModel.getDataByTag('全网年累计增发电量').s('text','--亿kWh');
					}
					if(result.data.windUseOfHours || result.data.windUseOfHours === 0){
						dataModel.getDataByTag('风电累计利用小时数').s('text',result.data.windUseOfHours+'h');
					}else{
						dataModel.getDataByTag('风电累计利用小时数').s('text','--h');
					}
					if(result.data.lightUseOfHours || result.data.lightUseOfHours === 0){
						dataModel.getDataByTag('光伏累计利用小时数').s('text',result.data.lightUseOfHours+'h');
					}else{
						dataModel.getDataByTag('光伏累计利用小时数').s('text','--h');
					}
					if(result.data.discardWindElectricity || result.data.discardWindElectricity === 0){
						dataModel.getDataByTag('累计弃风电量').s('text',result.data.discardWindElectricity+'亿kWh');
					}else{
						dataModel.getDataByTag('累计弃风电量').s('text','--亿kWh');
					}
					if(result.data.discardLightElectricity || result.data.discardLightElectricity === 0){
						dataModel.getDataByTag('累计弃光电量').s('text',result.data.discardLightElectricity+'亿kWh');
					}else{
						dataModel.getDataByTag('累计弃光电量').s('text','--亿kWh');
					}
				}
			});
			
			//风电占比
			$.ajax({
				url: attributeConfig.url + "/epplatform/v1/consumption/windElectricProportion",
				type:"GET",
				contentType:"application/json",
				dataType:"json", 
				data:JSON.stringify(),
				success:function(result){
					dataModel.getDataByTag('风电占比').a('data',result.data);
				}
			});
			
			//光伏占比
			$.ajax({
				url: attributeConfig.url + "/epplatform/v1/consumption/photovoltaicProportion",
				type:"GET",
				contentType:"application/json",
				dataType:"json", 
				data:JSON.stringify(),
				success:function(result){
					dataModel.getDataByTag('光伏占比').a('data',result.data);
				}
			});
			
			//风力发电小时数
			$.ajax({
				url: attributeConfig.url + "/epplatform/v1/consumption/windPowerHours",
				type:"GET",
				contentType:"application/json",
				dataType:"json", 
				data:JSON.stringify(),
				success:function(result){
					dataModel.getDataByTag('风力发电小时数').a('xValue',result.data.months);
					dataModel.getDataByTag('风力发电小时数').a('barData2',result.data.thisYearPowerHours);
					dataModel.getDataByTag('风力发电小时数').a('barData1',result.data.lastYearPowerHours);
					dataModel.getDataByTag('风力发电小时数').a('lineData',result.data.yearOnYear);
				}
			});
			
			//弃风电量
			$.ajax({
				url: attributeConfig.url + "/epplatform/v1/consumption/abandonWindElectricity",
				type:"GET",
				contentType:"application/json",
				dataType:"json", 
				data:JSON.stringify(),
				success:function(result){
					dataModel.getDataByTag('弃风电量').a('xValue',result.data.months);
					dataModel.getDataByTag('弃风电量').a('barData2',result.data.thisYearAbandonWindElectricity);
					dataModel.getDataByTag('弃风电量').a('barData1',result.data.lastYearAbandonWindElectricity);
					dataModel.getDataByTag('弃风电量').a('lineData',result.data.yearOnYear);
				}
			});
			
			//光伏发电小时数
			$.ajax({
				url: attributeConfig.url + "/epplatform/v1/consumption/photovoltaicPowerHours",
				type:"GET",
				contentType:"application/json",
				dataType:"json", 
				data:JSON.stringify(),
				success:function(result){
					dataModel.getDataByTag('光伏发电小时数').a('xValue',result.data.months);
					dataModel.getDataByTag('光伏发电小时数').a('barData2',result.data.thisYearPowerHours);
					dataModel.getDataByTag('光伏发电小时数').a('barData1',result.data.lastYearPowerHours);
					dataModel.getDataByTag('光伏发电小时数').a('lineData',result.data.yearOnYear);
				}
			});
			
			//弃光电量
			$.ajax({
				url: attributeConfig.url + "/epplatform/v1/consumption/abandonLightElectricity",
				type:"GET",
				contentType:"application/json",
				dataType:"json", 
				data:JSON.stringify(),
				success:function(result){
					dataModel.getDataByTag('弃光电量').a('xValue',result.data.months);
					dataModel.getDataByTag('弃光电量').a('barData2',result.data.thisYearAbandonWindElectricity);
					dataModel.getDataByTag('弃光电量').a('barData1',result.data.thisYearAbandonWindElectricity);
					dataModel.getDataByTag('弃光电量').a('lineData',result.data.yearOnYear);
				}
			});
		}
		
		//获取变电站及通道
		function getSubstationMap() {
			$.ajax({
				url: attributeConfig.url + "/epplatform/v1/consumption/substationMap",
				type:"GET",
				contentType:"application/json",
				dataType:"json", 
				data:JSON.stringify(),
				success:function(result){
					edgeList = result.data.edgeList;
					windFieldMap = result.data.windFieldMap;
				
					createNodes(dm_global, windFieldMap,2);//创建变电站
					createEdge(dm_global,view_global,edgeList);//创建通道
				}
			});
		}


    </script>
</head>

<body onload='init()'>
</body>

</html>
